<!--
直播当页支付Sku组件
Sam Liu 2021.7.26
-->
<template>
  <div>
    <van-sku
      :goods="goods"
      :sku="sku"
      :quota="limitPurchase"
      :quota-used="hasBuy"
      :start-sale-num="startSaleNum"
      :initial-sku="initialSku"
      :custom-stepper-config="stepperConfig"
      :hide-stock="!sku.hide_stock"
      :class="hideStepper ? 'sku-selector del-sku-step' : 'sku-selector'"
      @buy-clicked="onBuyClicked"
      @sku-selected="skuSelected"
      :get-container="getContainer"
      v-model="show"
      :style="isCOPGoods ? {'maxHeight': '80vh'} : {}"
    >
      <template #extra-sku-group>
        <div class="cop-goods" v-if="isCOPGoods">
          <div class="cop-goods__title" v-show="childSku.length">
            {{ t('skuSelector_included_products') }}
          </div>
          <div class="cop-goods__item">
            <template v-for="child in childSku">
              <CCombinedGoodsCard :goodsInfo="child" :key="child.spu_id"></CCombinedGoodsCard>
            </template>
          </div>
        </div>
      </template>

      <!--底部按钮-->
      <template #sku-actions="props">
        <div class="van-sku-actions">
          <button
            :class="['buy-btn', 'theme-customize-bg', {'disbaledBtnClass': isDisbaledBtn}]"
            @click="props.skuEventBus.$emit('sku:buy')"
          >
            {{ btnText }}
          </button>
        </div>
      </template>
    </van-sku>
    <!-- 换购提醒 -->
    <exPurchase v-if="showSvipModal" :svipTitle="svipTitle" @handleExPurchase="handleExPurchase" />
  </div>
</template>

<script>
import {
  getSkuProperty,
  getSkuList,
  getBaseInfo,
  getMarketing,
  changeLivePrefix,
  getLimitBuyOrder,
  getSuperVipInfo,
  getChildSku,
  getCopWxMiniSkuList,
  getVipSpecification
} from "./api";
import {
  isEmptyObject,
  getMinimumPrice,
  centToYuan,
  svipListConvert,
  marketingSkuListConvert,
  skuListConvert,
  skuPropertyConvert,
  stockAmountCount,
  isSeckillStart,
} from "./util";
import locale from '../../mixins/locale'
import { replaceCDN } from "@xiaoe/js-tools/lib/replaceCDN";
import { inMiniprogram, isMiniprogramInIos, isIos } from  "./utils/checkEnv"
import exPurchase from './exPurchase';
import {sensorsTrackButton} from "./utils/sensors_report";
import Mimir from "@xiaoe/mimir";

export default {
  name: "SkuSelector",
  components: {
    CCombinedGoodsCard: () => Mimir({ section: 'jingwei',project:'live_h5' }).get("c-combined-goods-card"), // 组合商品
    exPurchase,
  },
  props: {
    spuId: {
      required: true,
      type: String,
    },
    isAlive: {
      default: 0,
      type: Number,
    },
    showSku: {
      required: true,
      type: Boolean,
      default: false,
    },
    aliveId: {
      type: String,
      required: false,
    },
    hasPreferentialPrice: { // 商品列表点击去抢购的商品有无券后价的标识，有的话确认订单领券，无就不领券
      type: Boolean,
      default: false
    },
    aliveInfo:{
      required: false,
      type:Object
    },
    isCOPGoods: {
      type: Boolean,
      default: false
    },
    // appen的dom
    getContainer: {
      type: String,
      default: 'body'
    }
  },
  mixins: [locale],
  data() {
    return {
      // 商品基础信息
      baseInfo: {},
      goods: {
        // 默认商品 sku 缩略图
        picture: "",
      },
      // 营销数据
      marketingData: '',
      // 超级会员数据
      svipInfo: '',
      sku: {
        tree: [],
        // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
        list: [],
        price: "-.--", // 默认价格（单位元）
        stock_num: 0, // 商品总库存
        hide_stock: false, // 是否隐藏剩余库存
      },
      initialSku:{}, //初始化SKU属性
      limitPurchase: 0, // 限购
      startSaleNum: 1, // 起售
      stepperConfig: this.generateStepperConfig(),
      hasBuy: 0, // 历史已购
      childSku: [], // 组合商品选中规格的内含商品
      hasNormalENT: false, // 组合商品的内含商品中是否有正常的实物商品
      skuList: [], // 商品原本sku数据---接口返回
      showSvipModal: false, // 直接控制是否显示会员换购提醒弹框
      isShowSvipModal: false, // 间接是否该显示会员换购提醒
      svipTitle: '', // 当前sku中的会员卡名称
    };
  },
  computed: {
    show: {
      get() {
        return this.showSku;
      },
      set(val) {
        this.$emit("update:showSku", val);
      },
    },
    hideStepper(){
      return this.baseInfo.resource_type == 23 || this.baseInfo.resource_type == 7 || this.isCOPGoods
    },
    // 组合商品规格在ioswx端是否被允许购买
    isIosCOPAllow() {
      // 如果有正常的实物商品，直接允许所有购买
      if(this.hasNormalENT) return true

      // 子商品是否具有实物商品
      let isENT = this.childSku.some(child => child.spu_type === 'ENT' && child.goods_state === 0);

      // 子商品是否在其他ios中支持的类型
      let isOtherAllow = false;
      if(!isENT) {
        isOtherAllow = this.childSku.every(child => IOS_AGREE_TYPE.includes(child.spu_type))
      }
      return !!(inMiniprogram && isIos && (isENT || isOtherAllow));
    },
    // 按钮文字设置 组合商品区别其他商品
    btnText(){
      if(!this.isCOPGoods) return this.t('skuSelector_btn_confirm')
      if(isMiniprogramInIos) {
        return this.isIosCOPAllow ? this.t('skuSelector_buy') : this.t('skuSelector_ios_no_buy')
      }
      return this.t('skuSelector_buy');
    },
    // 用户是否为超级会员
    userIsVip() {
      return this.svipInfo?.svip_info?.user_svip_info?.state === 1;
    },
    // 对组合商品的按钮存在异常状态做处理
    isDisbaledBtn() {
      if(!this.isCOPGoods || !this.childSku.length) return false;

      let state = this.childSku.every(child => child.goods_state === 0);

      // 微信小程序且为ios端
      if(isMiniprogramInIos && state) {
        return !this.isIosCOPAllow;
      }

      if(!state) return true;

      // 暂时默认false吧
      return false
    },
    // 是否禁止显示价格 --- ios店铺小程序若是因为知识商品不可买的情况则不显示价格
    isForbidShowPrice() {
      return this.isDisbaledBtn && !this.isIosCOPAllow && isMiniprogramInIos;
    }
  },
  watch: {
    isAlive: {
      handler(val) {
        if (val === 1) {
          changeLivePrefix("/_alive");
        } else {
          changeLivePrefix("");
        }
      },
      immediate: true,
    },
    showSku(val) {
      if (val) {
		this.initialSku={
			// 初始选中数量
			selectedNum: 1,
			// 初始选中的sku属性
			selectedSku:""
		},
		this.startSaleNum = 1
        this.initData();
      } else {
        // 类似beforeDestroy
        this.removeSvipTag()

        this.childSku = [];
      }
    },
    isForbidShowPrice: {
      handler(val) {
        this.$nextTick(() => {
          if (document.getElementsByClassName('van-sku__goods-price')[0] && document.getElementsByClassName('van-sku__goods-price')[0].style){
            // 不能购买时，屏蔽价格
            if (val) {
              document.getElementsByClassName('van-sku__goods-price')[0].style.display = 'none';
            } else {
              document.getElementsByClassName('van-sku__goods-price')[0].style.display = 'block';
            }
          }
        });
      },
      immediate: true,
    }
  },
  methods: {
    // 初始化组合商品ios店铺小程序sku --- 不能购买情况
    async initWxMiniCOPSku() {
      const list = this.skuList || [];
      if(!isMiniprogramInIos || !this.isCOPGoods || !list.length) {
        return;
      }
      let hasNormalENT = false, isOtherAllow = false;
      // 实物子商品列表
      const entList = [], promiseArr = [];

      list.forEach(item => {
        let entItem = item.child_sku.find(child => child.spu_type === 'ENT')
        if(entItem) {
          entList.push(entItem)
        }
      })

      if(entList.length) {
        for(let i = 0; i < entList.length; i++) {
          let { master_spu_id, master_sku_id } = entList[i]
          promiseArr.push(new Promise((r, j) =>{
            const childParams = {
              spu_id: master_spu_id,
              sku_id:master_sku_id
            }
            getChildSku(childParams).then((res) => {
              r(res);
            }).catch((err) => j(err));
          }))
        }
        const resArr = await Promise.all(promiseArr);
        hasNormalENT = resArr.some(res=>{
          if(res.code === 0) {
            return res.data.some(v => v.spu_type == "ENT" && v.goods_state == 0)
          }
        })
      }

      if(!hasNormalENT) {
        isOtherAllow = list.some(item=> item.child_sku.every(child => [
          'ALV',
          'BTK',
          'ENT'
        ].includes(child.spu_type)))
      }

      this.hasNormalENT = hasNormalENT;
    },
    // 步进器限购起售逻辑处理
    generateStepperConfig() {
      return {
        // 自定义步进器超过限制时的回调
        handleOverLimit: (data) => {
          const { action, limitType, quota, quotaUsed, startSaleNum } = data;

          if (action === 'minus') {
            // 起售
            this.$toast(startSaleNum > 1  ? this.t('skuSelector_msg_minusStart', {start: startSaleNum}) : this.t('skuSelector_msg_minus'));
          } else if (action === 'plus') {
            // 限购
            if (limitType === 0) {
              let msg = this.t('skuSelector_msg_quota', {quota: quota});
              // 这里需要历史已购买的限购数量
              if (quotaUsed > 0) msg = this.t('skuSelector_msg_quotaUsed', {quota: quota, count: quotaUsed});
              this.$toast(msg);
            } else {
              if(this.hasBuy === this.limitPurchase){
                // 触发限购兜底
                let msg = this.t('skuSelector_msg_quota', {quota: this.limitPurchase});
                // 这里需要历史已购买的限购数量
                if (this.hasBuy > 0) msg = this.t('skuSelector_msg_quotaUsed', {quota: this.limitPurchase, count: this.hasBuy});
                this.$toast(msg);
              }else{
                this.$toast(this.t('skuSelector_msg_understock'));
              }
            }
          }
        },
      }
    },
    // 初始化组件数据
    initData() {
      Promise.all(this.assembleRequest()).then((res) => {
        if (res.some((e) => e.code !== 0)) {
          console.error("获取商品相关信息接口报错");
          return;
        }
        this.formatInitializedData(res);
      });
    },
    // 组装请求
    assembleRequest() {
      const params = {
        spu_id: this.spuId,
      };
      let baseInfo = new Promise((resolve, reject) => {
        getBaseInfo(params).then((res) => {
          resolve(res);
        }).catch((err) => reject(err));
      });
      let skuProperty = new Promise((resolve, reject) => {
        getSkuProperty(params).then((res) => {
          resolve(res);
        }).catch((err) => reject(err));
      });
      let skuList = new Promise((resolve, reject) => {
        let request = '';
        // 店铺小程序 && 组合商品 ---> 接口会判断sku内含商品资质，无资质，接口过滤对应sku
        if(inMiniprogram && this.isCOPGoods) {
          request = getCopWxMiniSkuList;
        } else {
          request = getSkuList;
        }
        request(params).then((res) => {
          resolve(res);
        }).catch((err) => reject(err));
      });
      let market = new Promise((resolve, reject) => {
        getMarketing(params).then((res) => {
          resolve(res);
        }).catch((err) => reject(err));
      });

      return [baseInfo, skuProperty, skuList, market]
    },
    // 格式化组件化数据
    async formatInitializedData(res) {
      let [
        { data: baseInfo },
        { data: skuProperty },
        { data: skuList },
        { data: marketing },
      ] = res;

      // 超级会员要过滤掉体验规格
      if (baseInfo?.spu_type === 'SVIP') {
        const params = {
          app_id: window.APPID,
          field_list: ["id","app_id","svip_id","type","period","price","user_limit","state","new_has_distribute"],
          ids: [],
          is_show_experience: 1,
          page: 1,
          page_size: 10,
          type: 6,
          state: 0,
          svip_ids: [this.spuId]
        }
        await getVipSpecification(params).then((res) => {
          let { code, data } = res;
          if (code === 0) {
            let map = new Map();
            data.list.forEach(item => {
              map.set(item.id, item.id);
            });

            // 过滤 skuList 和 构建 idsToRemove 集合
            const idsToRemove = new Set();
            skuList = skuList.filter(sku => {
              const keep = !map.has(Number(sku.sku_business_id));
              !keep && idsToRemove.add(sku.sku_id);
              return keep;
            });

            // 更新 skuProperty.value_arr
            skuProperty.forEach(res => {res.value_arr = res.value_arr.filter(item => !idsToRemove.has(item.sku_id));
            });
          }
        }).catch((err) => {
          console.log(err);
        });
      }

      (inMiniprogram && this.isCOPGoods) && (skuList = skuList?.list);

      this.skuList = skuList;

      // 为了兼容组合商品在店铺小程序里面的资质判断的规格属性，这里单独做了skuProterty处理
      if(inMiniprogram && this.isCOPGoods) {
        if (skuList.length) {
          let obj = {
            attr_name: "规格",
            spu_type: 'COP',
            value_arr: []
          };
          skuList.forEach(sku => {
            let attrs = sku?.attr_value[0] ?? []
            attrs["sku_id"] = sku?.sku_id
            attrs["extends"] = ''
            obj.value_arr.push(attrs)
          })
          skuProperty = [obj]
        } else {
          skuProperty = [];
        }
      }

      let limitData = await this.handleHistoryLimit(baseInfo)
      let svipInfo = await this.getSvipInfo(baseInfo)

      // sku 基本信息
      // 默认主图
      let options = {width: "600"}
      this.goods.picture = replaceCDN(baseInfo.goods_img[0], options);

      // 商品限购
      this.limitPurchase = baseInfo.limit_purchase
      this.limitType = baseInfo.limit_type

      // limit_type === 3 按单限购，不需要校验已够数量，已购改为0
      if (this.limitType === 3){
        this.hasBuy = 0
      }else{
        this.hasBuy = limitData
      }



      // 默认价格显示
      this.sku.price = baseInfo.price_low === baseInfo.price_high ? centToYuan(baseInfo.price_low)  : `${centToYuan(baseInfo.price_low)} - ${centToYuan(baseInfo.price_high)}`;

      // 计重商品增加“销售单位”
      if(baseInfo.is_best === 2) {
        // 展示最低价+销售单位
        this.sku.price = centToYuan(baseInfo.price_low);
        // 筛选出最低价格的sku数据下的非标数据，添加对应的销售单位
        this.addSaleUnitTag(item => item.sku_price === baseInfo.price_low);
      } else {
        this.removeSaleUnitTag();
      }

      // sku 所有规格及规格值
      this.sku.tree = skuPropertyConvert(skuProperty);

      // sku 所有规格组合
      this.sku.list = skuListConvert(skuList);

      //商品库存是否展示
      this.sku.hide_stock = Boolean(baseInfo.show_stock)

      // 营销数据
      this.marketingData = marketing

      // 超级会员数据
      this.svipInfo = svipInfo

      // 总库存
      this.sku.stock_num = stockAmountCount(skuList);

      // 根据活动情况更新对应sku价格
      this.handleSkuPrice()

      // 设置SKU的起售，目前所有SKU起售一样，故写作如下
      this.startSaleNum = skuList[0].sku_min_purchase || 1

      // 备份下基础信息
      this.baseInfo = baseInfo;

      this.initWxMiniCOPSku();
    },
    // 组合商品请求内含商品
    getChildSkuChange(sku_id) {
      if (this.isCOPGoods) {
        const childParams = {
          sku_id: sku_id,
          spu_id: this.spuId,
        }
        getChildSku(childParams).then((res) => {
          const { code, data } = res;
          if (code === 0) {
            this.childSku = data;
            this.handleUserIsSvip();
          }
        }).catch((err) => reject(err));
      }
    },
    skuSelected(val) {
      const { selectedSkuComb } = val;
      // 计重商品增加“销售单位”
      if(this.baseInfo.is_best === 2) {
        this.addSaleUnitTag(item => item.sku_id === selectedSkuComb?.id)
      }
      // 组合商品才能触发
      if (!this.isCOPGoods || selectedSkuComb == null) {
        this.childSku = []
        return;
      }
      const sku_id = selectedSkuComb?.__ob__?.value?.id;
      this.getChildSkuChange(sku_id);
    },
    // sku价格后加销售单位
    addSaleUnit(fn) {
      // 计重商品增加“销售单位”
      const sku_sales_unit = this.skuList?.filter(fn);
      let sale_unit = '斤';
      if(sku_sales_unit.length > 0){
        // 选中的sku的销售单位
        sale_unit = JSON.parse(sku_sales_unit[0]?.sales_unit || '{}')?.sale_unit;
      } else {
        // 取消选中sku时默认最低价的销售单位
        const sku_sales_unit = this.skuList?.filter(item => item.sku_price === this.baseInfo.price_low);
        sale_unit = JSON.parse(sku_sales_unit[0]?.sales_unit || '{}')?.sale_unit;
      }
      return sale_unit;
    },
    // 选中sku时插入销售单位
    addSaleUnitTag(fn) {
      // 已有dom结构
      let goodsInfo = document.querySelector('.van-sku__price-num')
      if (!goodsInfo) return
      this.removeSaleUnitTag()

      // 要插入的tag
      let selaUnitTag = document.createElement('span')
      selaUnitTag.classList.add('sku-add-sale-unit')
      // 筛选出当前选中sku的销售单位
      selaUnitTag.innerText = '/' + this.addSaleUnit(fn)

      goodsInfo.appendChild(selaUnitTag)
    },
    // 删除销售单位
    removeSaleUnitTag() {
      const saleUnitElements = document.querySelectorAll('.sku-add-sale-unit')
      saleUnitElements.forEach(ele => ele.remove())
    },
    // 组合商品属性点击后子商品包含超级会员卡情况
    handleUserIsSvip() {
      let child_sku = this.childSku;
      if (!this.userIsVip || !child_sku.some(child => child.spu_type === 'SVIP')) {
        this.isShowSvipModal = false;
      } else {
        if(!child_sku.length) return false;
        let isDiffSvipCard =  child_sku.some(child =>{
          if(child.spu_type === 'SVIP') {
            // 用户会员卡的信息
            let { id } = this.svipInfo?.svip_info?.svip_info;
            // 当前sku中的会员卡名称
            this.svipTitle = child.goods_name
            // 会员卡不同才提醒
            return id !== child.resource_id
          }
        })
        this.isShowSvipModal = isDiffSvipCard;
      }
    },
    // 对营销活动和超级会员价格进行判断，更新sku价格
    handleSkuPrice() {
      // 如果有营销活动会更新sku价格，（目前只有限时折扣
      const marketingInfo = this.marketingData?.marketing_info;
      // 有营销数据，且需要更新为营销的价格
      let needUpdateMarketingPrice = marketingInfo && marketingInfo?.specs_info && !marketingInfo.pre_time && isSeckillStart(marketingInfo)

      const { sku_svip_price_list, svip_info } = this.svipInfo;
      let hasVipPrice = !isEmptyObject(sku_svip_price_list); // 如果是超级会员商品就会有数据
      let userIsVip = svip_info?.user_svip_info?.state === 1; // 当前用户是超级会员, 不对值为2的过期会员进行处理
      // 有超级会员价，且需要更新为超级会员价格
      let needUpdateSvipPrice = hasVipPrice && userIsVip

      // 获取两者的最低价以作比较
      let marketingPrice = marketingInfo?.specs_info && getMinimumPrice(marketingInfo?.specs_info, 'marketing'); // 营销价
      let vipPrice = hasVipPrice && getMinimumPrice(sku_svip_price_list, 'svip'); // 超级会员价

      if (vipPrice < marketingPrice || (vipPrice && !marketingPrice)) {
        // 更新超级会员价, 超级会员价小于营销价或者有超会价没有营销价
        needUpdateSvipPrice && svipListConvert(sku_svip_price_list, this.sku)
        needUpdateSvipPrice && this.addSvipTag()
      }

      if (marketingPrice <= vipPrice || (!vipPrice && marketingPrice) || (marketingPrice > vipPrice && !userIsVip)) {
        // 更新营销价, 营销价大于等于超会价或者有营销价没超会价或者营销价高于超会价但是用户不是超会
        console.log("needUpdateMarketingPrice",needUpdateMarketingPrice)
        needUpdateMarketingPrice && marketingSkuListConvert(this.marketingData.marketing_info, this.sku)
        console.log("this.sku",this.sku)
      }
    },
    // 处理超级会员的数据
    getSvipInfo(baseInfo) {
      let params = {
        resource_id: baseInfo.resource_id,
        resource_type: baseInfo.resource_type
      }
      return getSuperVipInfo(params).then(res => {
        if (res.code === 0) {
          return res.data
        }
      }).catch(e => {
        console.error(e)
      })
    },
    // 处理超级会员的标签
    addSvipTag() {
      // 已有dom结构
      let goodsInfo = document.querySelector('.van-sku-header__goods-info')
      // goodsInfo下的第一个子节点
      let firstChild = goodsInfo.firstChild

      // 要插入的tag
      let svipWrap = document.createElement('div')
      let svipTag = document.createElement('span')
      svipWrap.classList.add('svip-tag-wrap')
      svipTag.classList.add('tag-content')
      svipTag.innerText = '超级会员'
      svipWrap.appendChild(svipTag)

      goodsInfo.insertBefore(svipWrap, firstChild)
      // 以上用于处理超级会员tag

      // 以下用于对已有dom新增类名，处理超会相关样式
      goodsInfo.classList.add('customize-svip')
    },
    // 处理历史易购的数据
    handleHistoryLimit(baseInfo) {
      let params = {
        spu_id: baseInfo.spu_id,
        limit_purchase: baseInfo.limit_purchase
      }
      return getLimitBuyOrder(params).then(res => {
        if (res.code === 0) {
          return Number(res.data)
        }
      }).catch(e => {
        console.log(e)
      })
    },
    // 换购提醒对话框回调
    handleExPurchase(val){
      this[val.name] = val.value;
    },
    // 点击购买
    onBuyClicked(obj) {
      // 组合商品是否存在异常状态
      if(this.isDisbaledBtn) {
        this.$toast(this.t('skuSelector_no_buy'))
        return
      }

      // 判断子商品是否存在超级会员情况
      if(this.isShowSvipModal){
        this.showSvipModal = this.isShowSvipModal
        return;
      }

      this.$emit("skuBuy", {
        id: this.baseInfo.spu_id,
        spu_id: this.baseInfo.spu_id,
        spu_type: this.baseInfo.spu_type,
        sku: obj.selectedSkuComb.id,
        resource_id: this.baseInfo.resource_id,
        resource_type: this.baseInfo.resource_type,
        count: obj.selectedNum,
        isAlive: this.isAlive,
        aliveId: this.aliveId,
        hasPreferentialPrice: this.hasPreferentialPrice,
        superVipPrice: '',  // 选择规格的时候，价格是计算后的
        price: obj.selectedSkuComb.price
      });
      //埋点
      console.log("sku确认埋点");
      if (this.aliveInfo && this.aliveId){
        // 直播间使用sku 上报埋点
        sensorsTrackButton({
          page_id: "C#h5#alive#alive_room",
          l_program: "H5",
          page_name: "直播间页面",
          page_path: "C端#H5#直播#直播间页面",
          page_button: "确认",
          app_id: this.aliveInfo.app_id,
          c_user_id: this.aliveInfo.user_id,
          client: window.wx?.CLIENT_SYSTEM,
          goods_id: this.baseInfo.spu_id,
          resource_id: this.baseInfo.resource_id,
          cmm2: window.isQlive ? '企业直播' : '知识店铺'
        })
      }

    },
    removeSvipTag() {
      let goodsInfo = document.querySelector('.van-sku-header__goods-info')

      // 判断是否存在超会类名
      let isExistSvipTag = Array.prototype.some.call(goodsInfo.classList, (e) => {
        return e === 'customize-svip'
      })
      if (isExistSvipTag) {
        goodsInfo.classList.remove('customize-svip')
        goodsInfo.removeChild(goodsInfo.firstChild)
      }
    }
  },
};
</script>

<style lang="scss">
.sku-selector .van-sku-body .van-hairline--bottom:after{
  border-bottom-width: 0;
}
.sku-selector {
  // 处理属性值样式
  .van-sku-row__item--active::before,
  .van-sku-row__image-item--active::before {
    background: none;
  }
  .van-sku-row__item--active {
    color: #333333;
    border: 1px solid;
  }
  .van-sku-header {
    .van-image {
      .van-image__img {
        object-fit: contain !important;
      }
    }
    .van-sku-header__goods-info {
      .van-sku__price-symbol {
        vertical-align: text-bottom;
      }
      .van-sku__price-num {
        vertical-align: unset;
      }
      &.customize-svip {
        display: -webkit-box;
        .van-sku__goods-price {
          color: rgb(51, 51, 51);
        }
      }
    }
    // 销售单位
    .sku-add-sale-unit {
      font-size: .24rem;
    }
    // 超级会员标识
    .svip-tag-wrap {
      color: rgb(255, 255, 255);
      background: rgb(51, 51, 51);
      display: inline-block;
      border-radius: 10px;
      .tag-content {
        font-size: 12px;
        background-image: linear-gradient(to right, #FFE4AD, #FFC266);
        -webkit-background-clip: text;
        -webkit-text-fill-color: rgba(0,0,0,0);
        padding: 2px 6px;
      }
    }
  }
  // 限购提示
  .van-sku__stepper-quota {
    color: #999999;
    float: none;
    padding-left: 0.08rem;
  }
  .van-sku-row__item {
    border-radius: 30px;
    padding: 0 8px;
    border: 1px solid white;
    .van-sku-row__item-img {
      height: 0.36rem;
      width: 0.36rem;
      .van-image__img {
        border: 0.01rem solid #E5E5E5;
        border-radius: 0.04rem;
      }
    }
    .van-sku-row__item-name {
      padding: 4px;
      line-height: 19px;
    }
  }
  .van-sku-actions {
    .buy-btn {
      width: 100%;
      padding: 0.2rem;
      border-radius: 0.4rem;
      color: #ffffff;
      height: .8rem;
    }
    .disbaledBtnClass {
      opacity: .4;
    }
  }
}
.del-sku-step{
  .van-sku-stepper-stock{
    display: none;
  }
  .van-sku-body{
    .van-hairline--bottom:after{
      border-bottom-width: 0px !important;
    }
  }
}
.van-sku-container {
  min-height: 70% !important;
  // max-height: 80% !important;
}

// 组合商品样式
.cop-goods {
  padding: .2rem .4rem 0 .4rem;
  &__title{
    font-weight: 600;
    margin: .2rem 0;
  }
}

</style>
